import React, { Component } from 'react';
import {
	StyleSheet, View, Image, Platform, ScrollView,
	TouchableOpacity
} from "react-native";
import { API, API_GENERATE } from '../../../config/api';
import HTTP from '../../../utils/http';
import { GLOBAL } from '../../../config/global';
import { style } from '../../../theme/style';
import { PageStatusIndex } from '../../../component/page-status/PageStatusIndex';
import { MoreRow, StorePane, ScanTop, PaneHead } from '../../../component/Store';
import { Common } from '../../../component/common/Common';
import { cStyles } from '../storeStyle.js';

const paneAndroid = (Platform.OS === 'android') ? cStyles.paneAndroid : null;
const scale = GLOBAL.SCALE;
const inoutFlag = 1;
const requestObj = {
	pageNo: 1,
	pageSize: 3,
	status: '',
	inoutFlag,
};

export class WarehouseInPage extends Component {
	static navigationOptions = ({ navigation, navigationOptions }) => {
		return {
			headerTitle: '入库通知单',
			headerTintColor: style.color.white,
			headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack() }} color='#fff' />,
			headerRight: (<Image style={{ marginLeft: 18 * scale, width: 9 * scale, height: 16 * scale }} source={require('../../../imgs/goBackEmpty.png')} />),
			headerStyle: {
				elevation: 0,
				backgroundColor: style.color.themeColor,
			},
			headerTitleStyle: {
				flex: 1,
				textAlign: 'center'
			}
		}
	};

	constructor(props) {
		super(props);
		this.state = {
			pageStatus: {
				status: 'loading'
			},
			noticeList: [],
		};
		this._didPressMoreRow = this._didPressMoreRow.bind(this);
		this._goToStockOutDetail = this._goToStockOutDetail.bind(this);
		this._doScan = this._doScan.bind(this);
	}

	componentWillMount () {
	}

	async componentDidMount () {

		const responseData = await HTTP.POST(API_GENERATE(API.FIND_NOTICE_LIST), requestObj);
		const { rows } = responseData;
		if (rows && rows.length) {
			this.setState({
				noticeList: rows,
				pageStatus: {
					status: 'data'
				},
			});
		} else {
			this.setState({
				pageStatus: {
					status: 'empty'
				},
			});
		}
	}

	_didPressMoreRow () {
		const { navigate } = this.props.navigation;
		navigate('NoticeListPage', {
			inoutFlag
		});
	}

	render () {

		const { navigate } = this.props.navigation;
		const { noticeList, pageStatus } = this.state;
		const { status } = pageStatus;

		let statusView = <MoreRow leftText={'入库通知单'} rightText={'查看更多'} onPress={this._didPressMoreRow} />;
		if (status == 'loading') {
			statusView = <PageStatusIndex status={`${status}`} />;
		} else if (status == 'empty') {
			statusView = <PageStatusIndex status={`${status}`} emptyText={'没有查找到满足条件的数据'} />;
		}

		const noticeViews = noticeList.map((item) => {
			const { noticeId, contractId, warehouseName, status } = item;
			const noticeDataList = [{
				label: '合同号：',
				val: contractId,
			}, {
				label: '入库仓库：',
				val: warehouseName,
			}];
			return (
				<TouchableOpacity style={[cStyles.pane, paneAndroid, { alignSelf: 'center', }]} key={noticeId} onPress={() => {
					navigate('StockOutDetail', {
						noticeId,
						inoutFlag
					});
				}} activeOpacity={0.5}>
					<PaneHead identifierText={`编号：${noticeId}`} statusText={status} />
					<StorePane rowDataList={noticeDataList} />
				</TouchableOpacity>
			);
		});

		if (this.props.navigation.state.params) {
			const ocrInfo = this.props.navigation.state.params.ocrInfo;
			console.log('ocrInfo:', ocrInfo);
		}

		return (
			<ScrollView style={styles.scrollView}>
				<ScanTop doSearch={this._goToStockOutDetail} doScan={this._doScan} />
				{
					status === 'data' ?
						<View style={styles.container}>
							{noticeViews}
						</View> :
						<View>{statusView}</View>
				}
			</ScrollView>
		)
	}

	/**
 * 
 */
	_doScan () {
		const { navigate } = this.props.navigation;
		navigate('BarcodeScan', {
			pageName: 'WarehouseInPage'
		});
	}

	_goToStockOutDetail (noticeId) {
		const { navigate } = this.props.navigation;
		navigate('StockOutDetail', {
			noticeId,
			inoutFlag
		});
	}

}

const styles = StyleSheet.create({

	container: {
		flex: 1,
		backgroundColor: '#fff',
	},
})